<template>
    <div id="home">
        <el-container>
            <!-- 头部 -->
            <el-header id="headerContainer">
                <div>
                    <Header></Header>
                </div>
            </el-header>
            <!-- 页面主体区域 -->
            <el-container id="body">
                <!-- 左侧导航 -->
                <el-aside id="asideMenu">
                    <NavMenu :menuList="menuList"></NavMenu>
                </el-aside>
                <!-- 右侧内容主体 -->
                <el-main id="mainArea">
                    <main-tab v-if="!$store.state.common.contentIsNeedRefresh" />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import NavMenu from "@/components/NavMenu";
import Header from "@/components/Header";
import MainTab from "@/components/MainTab"
export default {
    name: "home",
    components: {
        NavMenu,
        Header,
        MainTab
    },
    provide() {
        // 刷新
        return {
            refresh() {
                this.$store.commit('common/updateContentIsNeedRefresh', true)
                this.$nextTick(() => {
                    this.$store.commit('common/updateContentIsNeedRefresh', false)
                })
            }
        }
    },
    data() {
        return {
            menuList: []
        }
    },
    created() {
        this.getMenuList()
    },
    methods: {
        async getMenuList() {
            // TODO 这里随后要改成使用接口的方式获取菜单数据
            // this.menuList = this.$testData.menuList;
            this.$http({
                url: `/pms/admin/permission/getAdminMenuList`,
                method: 'post'
            }).then((response) => {
                sessionStorage.setItem("menuList", JSON.stringify(response.data))
                this.menuList = response.data;
            });
        }
    }
};
</script>

<style lang="scss">
#home {
    height: inherit;
    display: flex;

    #headerContainer {
        background-color: #373d41;
        display: flex;
        align-items: center;

        div {
            flex: 1;
            color: whitesmoke;
        }
    }

    #asideMenu {
        background-color: #545c64;
        width: 200px !important;
    }

    #mainArea {
        background-color: #eaedf1;
        padding: 0;
    }
}

.el-tabs>.el-tabs__header>.el-tabs__nav-wrap {
    background-color: whitesmoke;
    padding-left: 20px;
}

// main-area里面整体的版式调整
#tab {
    height: 100%;

    .el-card {
        height: inherit;
        border: none;
        background-color: #eaedf1;
        box-shadow: none;

        &>.el-card__body {
            height: inherit;
            padding: 0;
        }
    }

    &>.el-tabs {
        height: inherit;
        display: flex;
        flex-direction: column;

        &>.el-tabs__header {
            margin: 0;
        }

        &>.el-tabs__content {
            flex: 1;
            height: inherit;
            overflow: auto;

            &>.el-tab-pane {
                padding: 8px 10px 0 10px;
            }
        }
    }
}

#body {
    overflow: hidden;
}
</style>